<template>
  <v-app>
    <v-navigation name="ss"
                  app>
      <div class="navbar">
        <div class="navbar-brand">
          <div id="logo"
               class="brand-icon"></div>
          <div class="brand-title">
            <span class="brand-text">vExpense | TravelAllowance</span>
          </div>
        </div>
        <div class="user-image"></div>

      </div>
    </v-navigation>
    <v-main>

      <v-container>
        <div class="MyTravel">
          <v-list>
            <v-list-item v-model="selectedItem">
              <v-list-item-title >用户管理</v-list-item-title>
            </v-list-item>

<!--            <v-list-group @mouseover="mouseover"-->
<!--                          @mouseleave="mouseover"-->
<!--                          v-model="menuActive">-->
<!--              <template v-slot:activator>-->
<!--                <v-list-item-title>Requests for others</v-list-item-title>-->
<!--              </template>-->
<!--              <v-list-item v-for="(title, i) in admins"-->
<!--                           :key="i"-->
<!--                           link>-->
<!--                <v-list-item-title v-model="menuActive"-->
<!--                                   v-text="title"-->
<!--                                   @mouseover="mouseover"></v-list-item-title>-->
<!--              </v-list-item>-->
<!--            </v-list-group>-->

            <v-list-item>
              <v-list-item-title>Approving requests</v-list-item-title>
            </v-list-item>

            <v-list-item>
              <v-list-item-title>Finance operations</v-list-item-title>
            </v-list-item>

            <v-list-item>
              <v-list-item-title>System configuration</v-list-item-title>
            </v-list-item>

            <v-list-item>
              <v-list-item-title>Report centre</v-list-item-title>
            </v-list-item>

            <v-list-item>
              <v-list-item-title>Home</v-list-item-title>
            </v-list-item>
          </v-list>
          <router-view></router-view>

        </div>
      </v-container>
    </v-main>

  </v-app>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";

@Component({})
export default class App extends Vue {
  Menuitems: object[] = [
    { title: "My travel allowance requests" },
    { title: "Requests for others" },
    { title: "Approving requests" },
    { title: "Finance operations" },
    { title: "System configuration" },
    { title: "Report centre" },
    { title: "Home" },
  ];
  isActive: boolean = true;
  selectedItem: number = 1;
  admins: string[] = ["Management", "Settings"];
  menuActive: boolean = false;
  mouseleave() {
    this.menuActive = false;
  }
  mouseover() {
    this.menuActive = true;
  }
  mouseoverother() {
    this.menuActive = false;
  }
}
</script>
<style>
@import url("../assets/css/style.css");
</style>
